<template>
  <div class="checkhesuan">
    <div class="firstcell">
      <van-cell title="报销金额" :value="value" size="large"  />
    </div>
    <div class="smallcell">
      <van-cell-group>
        <van-cell v-for="(titles, values) in Acells"
                  :key="values"
                  :title="titles.title"
                  :value="titles.value" />
      </van-cell-group>
      <van-cell-group>
        <van-cell v-for="(titles, values) in Bcells"
                  :key="values"
                  :title="titles.title"
                  :value="titles.value" />
      </van-cell-group>
      <van-cell-group>
        <van-cell v-for="(titles, values) in Ccells"
                  :key="values"
                  :title="titles.title"
                  :value="titles.value" />
      </van-cell-group>
    </div>
    <div class="bottom-row">
      <van-row>
        <van-col span="14">
          <van-cell-group>
            <van-cell v-for="(titles, values) in Dcells"
                      :key="values"
                      :title="titles.title"
                      :value="titles.value" />
          </van-cell-group>
        </van-col>
        <van-col span="10">
          <div>报销单据码</div>
          <img class="qrcode" :src="qrcode">
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>

export default {
  name: 'CheckHesuan',
  data() {
    return {
      value: '¥3906.60',
      Acells: [
        { title: '姓名', value: '张景荣' },
        { title: '人员类别', value: '退休' },
        { title: '单位', value: '组织部' },
        { title: '证件号', value: '018868' },
      ],
      Bcells: [
        { title: '申报金额', value: '4275.36' },
        { title: '自费部分', value: '86.84' },
        { title: '个人比例负担部分', value: '281.92' },
      ],
      Ccells: [
        { title: '单据张数', value: '11张' },
      ],
      Dcells: [
        { title: '审核员', value: '钟平' },
        { title: '报销员', value: '王凤英' },
        { title: '经手人', value: '黄宗荣' },
        { title: '报销日期', value: '2020-03-31' },
      ],
      qrcode: require('../assets/images/qrcode.png'),
    };
  },
};
</script>

<style scoped>

</style>
